<template>
  <div>
    <div :class="$store.state.menu.state?'w-64 nav':'nav'">
      <div class="logo">
        <router-link to="/" v-if="$store.state.menu.state">
          <!-- <img src="/static/images/logo_small.png" alt width="25" /> -->
          <p style="font-size:20px;color:#fff;margin:0">海曙</p>
        </router-link>
        <router-link to="/" v-else>
          <p style="font-size:20px;color:#fff;margin:0">海曙区农村环境</p>
          <!-- <img src="/static/images/icon.png" alt /> -->
        </router-link>
      </div>
      <el-menu
        router
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#409EFF"
        :default-active="$route.path"
        :collapse="$store.state.menu.state"
        :collapse-transition="false"
      >
        <el-menu-item index="/evaluate/type1">
          <i class="fa fa-bars"></i>
          <span slot="title">环境卫生</span>
        </el-menu-item>
         <el-menu-item index="/evaluate/type2">
          <i class="fa fa-bars"></i>
          <span slot="title">垃圾分类</span>
        </el-menu-item>
         <el-menu-item index="/evaluate/type3">
          <i class="fa fa-bars"></i>
          <span slot="title">公厕管护</span>
        </el-menu-item>
        <!-- <el-menu-item index="/toilet">
          <i class="fa fa-bookmark-o"></i>
          <span slot="title">厕所管理</span>
        </el-menu-item> -->
        <el-submenu index="2">
          <template slot="title">
            <i class="fa fa-cog"></i>
            <span>系统设置</span>
          </template>
          <el-menu-item index="/setting/personal">个人中心</el-menu-item>
          <el-menu-item index="/setting/user" v-if="user.type==0">用户管理</el-menu-item>
          <el-menu-item index="/setting/street" v-if="user.type==0">街道管理</el-menu-item>
          <el-menu-item index="/setting/standard" v-if="user.type==0">标准管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: this.$store.state.user
    };
  }
};
</script>
<style scoped>
.nav {
  height: 100vh;
  background-color: #545c64;
  position: fixed;
  width: 200px;
}
.fa {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
}

.logo {
  width: 100%;
  line-height: 60px;
  text-align: center;
  display: inline-block;
  border-bottom: 1px solid #464b51;
}
.logo img {
  vertical-align: middle;
}
.w-64 {
  width: 64px;
}
</style>